<template>
    <h2>学生信息管理</h2>
    <hr>
    <div class="wrap">
      <div class="left">
        <div class="font-size-switcher">
          文字大小：
          <div class="buttons">
            <span style="font-size: 12px" @click="changeFontSize('12px')">小号</span>
            <span style="font-size: 16px" @click="changeFontSize('16px')">中号</span>
            <span style="font-size: 24px" @click="changeFontSize('24px')">大号</span>
          </div>          
        </div>
        <table class="students" :style="{ 'font-size': tableFontSize }">
          <tr>
            <th>序号</th>
            <th>学号</th>
            <th>姓名</th>
            <th>班级</th>
            <th>性别</th>
            <th>操作</th>
          </tr>
          <tr v-for="(student, index) in students" :class="{
            male: student.gender == '男',
            female: student.gender == '女'
          }">
            <td>{{ index + 1 }}</td>
            <td>{{ student.studentNo }}</td>
            <td>{{ student.name }}</td>
            <td>{{ student.class }}</td>
            <td>{{ student.gender }}</td>
            <td>
              <a :href="'/students/' + student.studentNo">详细</a>
              <button @click="showEdit(index)">修改</button>
              <button @click="deleteStudent(index)">删除</button>
            </td>
          </tr>
        </table>
        <div>
          共有学生{{ stats.total }}名，
          其中女生{{ stats.female }}名，
          男生{{ stats.male }}名。
        </div>
        <div>
          <button @click="deleteLastStudent">删除最后一名学生</button>
        </div>
      </div>
      <div class="right">
        <div>
          <form action="" @submit.prevent>
            <div>
              <label for="">学号：</label>
              <input type="text" v-model="newStudent.studentNo">
            </div>
            <div>
              <label for="">姓名：</label>
              <input type="text" v-model="newStudent.name">
            </div>
            <div>
              <label for="">班级：</label>
              <select v-model="newStudent.class">
                <option value="软件181">软件181</option>
                <option value="软件182">软件182</option>
                <option value="软件183">软件183</option>
              </select>
            </div>
            <div>
              <label for="">性别：</label>
              <input type="radio" name="gender" value="男" v-model="newStudent.gender"> 男
              <input type="radio" name="gender" value="女" v-model="newStudent.gender"> 女
            </div>
            <div>
              <button @click="addStudent">保存</button>
              <button @click="resetForm">取消</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  
  
  </template>
  
  <script setup>
  import { ref, onMounted, computed } from 'vue';
  import { useRouter } from 'vue-router';
  import axios from 'axios';
  
  const router = useRouter();

  const students = ref([]);
  const newStudent = ref({
    studentNo: '',
    name: '',
    class: '',
    gender: '',
    subject: ''
  });
  const tableFontSize = ref('16px');
  
  let formMode = 'add';
  let editStudentIndex = null;
  
  const stats = computed(() => {
    var fStudents = students.value.filter(s => s.gender == '女');
    return {
      total: students.value.length,
      female: fStudents.length,
      male: students.value.length - fStudents.length
    }
  })
  function deleteLastStudent() {
    students.value.pop();
  }
  
  function addStudent() {
    console.log(newStudent.value);
    let newStudentCopy = JSON.parse(JSON.stringify(newStudent.value));
    if(formMode == 'add') {    
      students.value.push(newStudentCopy);
      // axios.post('/students/add', newStudentCopy)
      // .then(res => {
      //   res.data.message == 'success'
      // })
    } else if(formMode == 'edit') {
      students.value[editStudentIndex] = newStudentCopy;
    }  
    resetForm();
  }
  
  function resetForm() {
    newStudent.value.studentNo = '';
    newStudent.value.name = '';
    newStudent.value.class = '';
    newStudent.value.gender = '';
    formMode = 'add';
  }
  
  /**
   * 删除学生
   * @param index 要删除学生在数组中的索引
   */
  function deleteStudent(index) {
    // 调用数组的splice方法，从index位置开始，
    // 删1个元素
    students.value.splice(index, 1);
  }
  
  /**
   * 显示编辑表单
   * @param index 
   */
  function showEdit(index) {
    let editStudent = students.value[index];
    newStudent.value.studentNo = editStudent.studentNo;
    newStudent.value.name = editStudent.name;
    newStudent.value.class = editStudent.class;
    newStudent.value.gender = editStudent.gender;
    formMode = 'edit';
    editStudentIndex = index;
  }
  
  function changeFontSize(fontSize) {
    tableFontSize.value = fontSize;
  }
  
  function showStudentInfo(index) {
    router.push('/students/' + students.value[index].studentNo);
  }

  onMounted(() => {
    const api = '/api/students.json';
    axios.get(api)
    .then(res => {
      students.value = res.data;
    })
  })
  </script>
  
  <style lang="scss">
  .wrap {
    display: flex;
    left: 65%;
    right: 35%;
  }
  table.students {
    border-collapse: collapse;
    th {
      color: white;
      background-color: darkslategray;
      border: 1px solid white;
    }
    th, td {
      padding: 5px;
    }
    td {
      border: 1px solid #ccc;
    }
    tr.male {
      background-color: lightblue;
    }
    tr.female {
      background-color: lightpink;
    }
  }
  .font-size-switcher {
      font-size: 14px;
      color: #333;
      display: flex;
      align-items: center;
      .buttons {
        display: flex;
        width: 180px;
        justify-content: space-between;
        align-items: center;
        & > span {
          margin: 2px 6px;
          cursor: pointer;
          color: #666;
          &:hover {
            color: cornflowerblue;
          }
        }
      }
    }
  </style>